<!--
 * @Description: file content
 * @Author: xuqiuting
 * @Date: 2021-07-02 23:14:28
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-05 21:25:40
-->
<template>
<view class="">
    <uni-popup ref="popup" :mask-click="false">
        <view class="person-popup">
          <view class="person-popup-tip">本批次人员类型</view>
          <view class='person-popup-scan-tip'>有一码通二维码的客人需扫一码通二维码</view>
          <view class="person-popup-title">人员类型</view>
          <picker
            @change="changePersonType"
            :value="personTypeIndex"
            :range="personTypeList"
            range-key="label"
            class="popup-control-con-picker"
          >
            <view style="display: inline-block" class="uni-input">{{
              personTypeList[personTypeIndex].label
            }}</view>
            <view style="display: inline-block; float: right">
              <image
                class="popup-control-arr-show"
                src="https://szgd-dev.tgovcloud.com/public/images/checkin/arrow-down.png"
                mode="widthFix"
              ></image>
            </view>
          </picker>
          <view class="person-popup-title">隔离天数</view>
          <view style="border-bottom:1px solid #e4e4e4;font-size:24rpx;color:#000;">
            <input class="person-popup-input" placeholder="请输入隔离天数" v-model="quarantineDay" type="number" maxlength="3" />天
          </view>
          <view v-show="quarantineDay ==''" class="person-popup-warming">请输入隔离天数</view>
          <view v-show="!isNumber" class="person-popup-warming">请输入大于0的整数</view>
          <view @click="confirmPop" class="person-popup-btn">确定</view>
        </view>
    </uni-popup>
  <view  v-if="roomList.length==0" class="placeholder">暂无数据～</view>
  <view class="check-in-dialog" v-else>
    <!-- <view class="block">
      <label class="title">房间选择</label>
      <text class="text">以下房间均已完成消杀</text>
    </view> -->
    <view class="header">
      <view class="person-msg" v-if="personMsgShow">
        <view class="hotel-name">{{hotelName}}</view>
        <view class="person-msg-title">本批次人员类型</view>
        <view class="person-msg-list">
          <view class="person-msg-list-name">人员类型</view>
          <view class="person-msg-list-value">{{personTypeList[personTypeIndex].label}}</view>
        </view>
        <view class="person-msg-list">
          <view class="person-msg-list-name">隔离天数</view>
          <view class="person-msg-list-value">{{quarantineDay}}天</view>
        </view>
      </view>

      <view class="tips">
        <text class="tips-title">房间选择</text>
        <image src="https://szgd-dev.tgovcloud.com/public/images/tips.png" mode="widthFix" class="tips-img"></image>
        <text class="tips-con">以下房间均已完成消杀</text>
      </view>
      <view class="tool">
      <!-- <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="uni-input">{{ array[index] }}</view>
      </picker> -->

      <picker
        @change="bindPickerChange"
        :value="index"
        :range="array"
        range-key="roomFloor"
        class="normal-control-con-picker"
      >
       <view class="picker-content">
        <view style="display: inline-block" class="uni-input">{{
          selectedFloor?selectedFloor+'F':"选择楼层"
        }}</view>
        <view class="img" style="display: inline-block; float: right">
          <image
            class="nav-list-item-arr-show"
            src="https://szgd-dev.tgovcloud.com/public/images/checkin/arrow-down.png"
            mode="widthFix"
          ></image>
        </view>
        </view>
      </picker>
      <view class="search-room-num">
        <image src="https://szgd-dev.tgovcloud.com/public/images/checkin/icon-search.png"></image>
        <input
          class="uni-input"
          style="padding-left: 64rpx"
          placeholder="可输入房间号搜索"
          v-model="searchValue"
          @blur="searchRoomNum"
        />
      </view>
    </view>
    </view>

    <radio-group class="check-content">
      <ul>
        <li v-for="(item, key) in roomList" :key="item.roomFloor">
          <h2 class="liHeader" v-if="item.roomInfos.length > 0">{{ item.roomFloor }}F</h2>
          <div class="liContentwraper">
            <template v-for="(list, key) in item.roomInfos">
              <div
                :class="
                  roomCheck == list.roomNum
                    ? 'roomContainer roomContainerCheck'
                    : 'roomContainer'
                "
                :key="key"
                @click="()=>{radioChange(list)}"
              >
                <div class="top">
                   {{ list.roomNum }}房
                </div>

                  <label class="status-wrapper"
                    >
                    <!-- <radio
                      name="hotelRoom"
                      :value="list.roomNum"
                      :color="roomCheck == list.roomNum ? '#2C9AF1' : ''"
                      :checked="roomCheck == list.roomNum"
                  />
                  -->
                        <p class="status-yixiaodu green-status" v-if="list.roomState =='01' ">未入住</p>
                        <p class="status-ruzhu" v-else-if="list.roomState == 11">已锁定</p>
                        <p class="status-ruzhu red-status" v-else-if="list.roomState == 21">已入住</p>
                        <p class="status-ruzhu red-status" v-else-if="list.roomState == 31">待消毒</p>
                  </label>

              </div>
            </template>
          </div>
        </li>
      </ul>
    </radio-group>
    <!-- <view class="footer">
      <button :disabled="!roomId" class="dialogOk" @click="comfirm">确定</button>
    </view> -->
  </view>
</view>
</template>

<script>
import { getData } from "@/api";
import {uniPopup} from '@dcloudio/uni-ui'
export default {
  components: {uniPopup},
  props: ["value", "houseId"],
  data() {
    return {
      personMsgShow:false,
      hotelName:'',
      personTypeIndex:0,
      quarantineDay:14,
      personTypeList:[],
      roomCheck: this.value,
      roomId: this.houseId,
      roomNum: [],
      searchValue: "",
      index: "0",
      roomList:[],
      array: ["楼层选择", "1楼", "2楼", "3楼", "4楼"],
      selectedFloor:'', // 选中的楼层
      status: [
          {
              "label": "已消毒",
              "value": "01"
          },
          {
              "label": "已锁定",
              "value": "11"
          },
          {
              "label": "已入住",
              "value": "21"
          },
          {
              "label": "待消杀",
              "value": "31"
          }
      ]
    };
  },
  computed: {
    isNumber() {
      let res = true;
      if (this.quarantineDay) {
        if (!/^\d+(\.\d+)?$/.test(this.quarantineDay) || this.quarantineDay < 1) res = false;
      }
      return res;
    }
  },
  methods: {
    onDialogClose() {
      this.$emit("onClose");
    },
    changePersonType(e){
      this.personTypeIndex = e.target.value;
    },
    confirmPop(){
      if(this.quarantineDay !='' && this.isNumber){
          this.$refs.popup.close();
          this.personMsgShow =true;
      }
    },
    // 回显筛选数据
    saveData(){
      let curSelectedFloor = uni.getStorageSync("curSelectedFloor");
      let curSearchValue = uni.getStorageSync("curSearchValue");
      console.log('缓存选择楼层：',curSelectedFloor);
      console.log('缓存搜索房间：',curSearchValue);
      if (curSelectedFloor || curSearchValue) {
        this.searchValue = curSearchValue;
        this.selectedFloor = curSelectedFloor;
        let parmas = {
          roomFloor: curSelectedFloor,
          roomNum: curSearchValue
        }
        getData("roomInfo", "get", parmas).then((res) => {
          let roomList = res || [];
          this.roomList = roomList;
        });
      }
    },
    comfirm() {
      // this.$emit("input", this.roomCheck);
      // this.$emit("update:houseId", this.roomId)
      // this.$emit("comfirm",{floor:this.selectedFloor,scrollTop:this.scrollTop});
      var personType = JSON.stringify(this.personTypeList[this.personTypeIndex]);

      // 存储选择的楼层、搜索房间
      uni.setStorageSync('curSelectedFloor', this.selectedFloor );
      uni.setStorageSync('curSearchValue',this.searchValue );

      uni.navigateTo({
        url: `../checkIn/index?houseId=${this.roomId}&roomNum=${this.roomNum}&quarantineDay=${this.quarantineDay}&personType=${personType}`,
      });
    },
    radioChange(item) {
      this.roomCheck = item.roomNum;
      this.roomId = item.houseId
      this.roomNum = item.roomNum;
      this.comfirm();
      console.log(item)
    },
    searchRoomNum() {
      // 搜索时清除楼层选择
      this.selectedFloor = '';

      console.log(this.searchValue, "searchValue");
      getData("roomInfo", "get", {roomNum: this.searchValue}).then((res) => {
        this.roomList = res
      });
    },
    bindPickerChange(e) {
      // 选择楼层清除搜索关键词
      this.searchValue='';

      // console.log("picker发送选择改变，携带值为", e.target.value);
      console.log('bindPickerChange', e)
      let target = e.target.value ? this.array[e.target.value] : '';

      let {roomFloor} = target
      this.selectedFloor = roomFloor;

      getData("roomInfo", "get", {roomFloor}).then((res) => {
        this.roomList = res
      });
    },
  },
  async onLoad(){
    let personTypeList = await this.$store.dispatch('getDic','person_classify');
    this.personTypeList = personTypeList.sort((a,b)=>a.sort-b.sort)
    this.hotelName = uni.getStorageSync('hotelName')
  },
  onReady() {
    // let hostId = uni.getStorageSync("personalInfo").hotels[1].id;
    // b3beb2abd74511eb8fe7fa163eb9174b
    // b3bebb85d74511eb8fe7fa163eb9174b
    uni.showLoading();
    getData("roomInfo", "get").then((res) => {
      this.roomList = res

      this.array = res.sort((a,b)=>{
          return a.roomFloor-b.roomFloor;
      });
      if(this.roomList.length!=0){
         this.$refs.popup.open('bottom')
      }
      this.saveData();
      // this.array =  [{
      //   value: '',
      //   roomFloor: '选择楼层'
      // }].concat(res)
      uni.hideLoading();
      // console.log(this.array)
    });
  },
  onShow(){
    // 用于解决重成功页面返回当前页面房间状态未更新问题
    console.log('reload')
      uni.$on("reload", res => {
        console.log(res)
        if(res.data.name=='reload'){
          getData("roomInfo", "get", {roomNum: this.searchValue}).then((res) => {
                this.roomList = res
                this.array = res.sort((a,b)=>{
                  return a.roomFloor-b.roomFloor;
                });
                this.saveData();
              });
        }
        // 清除监听
        uni.$off('reload');
       })
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.person{
  &-msg{
    padding:32rpx;
    padding-bottom: 0;
    box-sizing: border-box;
    font-size: 34rpx;
    .hotel-name{
      color:#2C9AF1;
    }
    color:#666666;
    &-title{
      padding:20rpx 0;
    }
    &-list{
      display: flex;
      padding: 20rpx 0;
      margin-bottom: 40rpx;
      border-bottom: 1px solid #E5E5E5;
      &-name{
        font-size: 30rpx;
        flex: 1;
      }
      &-value{
        color:#000;
        flex:2;
        text-align: right;
      }
    }
  }
  &-popup{
    width:86vw;
    margin:30vh auto;
    background-color: #fff;
    border-radius: 10rpx;
    padding:40rpx;
    box-sizing: border-box;
    &-warming{
      color:#f00;
      font-size:24rpx !important;
    }
    &-tip{
      color:#000000;
      text-align: left;
    }
    &-scan-tip{
      color: #F15B53;
      text-align: left;
      margin-top:14rpx;
      font-size:26rpx;
    }
    &-title{
      padding:30rpx 0 20rpx;
      color:#333;
      font-size: 26rpx;
    }
    &-input{
      width:90%;
      display:inline-block;
      font-size: 24rpx;
      color:#000;
    }
    &-btn{
      width:50vw;
      background-color: #2C9AF1;
      border-radius: 16rpx;
      color:#fff;
      text-align: center;
      margin:40rpx auto 20rpx;
      font-size: 34rpx;
      padding:20rpx 0;
    }
  }
}

.popup-control {
  display: flex;
  padding-top: 40rpx;
  padding-bottom: 0;
  box-sizing: border-box;
  align-items: center;
  &-title {
    font-weight: 600;
    font-size: 40rpx;
    width: 35%;
    float: left;
  }
  &-con {
    width: 65%;
    float: right;
    &-picker {
      padding: 10rpx 0;
      border-bottom: 1px solid #E4E4E4;
      .uni-input {
        width: 90%;
        font-size: 24rpx;
        color:#000;
      }
    }
  }
  &-arr-show{
    width:40rpx;
  }
}
.placeholder{
  padding-top: 50rpx;
  text-align: center;
  color: #ccc;
}
.check-in-dialog {
  // height: 1000rpx;
  overflow: auto;
  position: relative;
  padding-top: 30rpx;
}
.check-content {
  margin-bottom: 192rpx; //取消/确定按钮
}
.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 97rpx;
  margin: 0 32rpx;
  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
    // padding: 20rpx 32rpx 20rpx;
  }
  .text {
    color: #d93f06;
    font-size: 24rpx;
    text-align: right;
    // padding: 20rpx 32rpx 20rpx;
  }
}

.uni-searchbar {
  //   padding: 32rpx 16rpx !important;
}
.uni-searchbar__box {
  border-radius: 60rpx !important;
  background-color: #fff !important;
}

// .popup-content {
//   width: 750rpx;
//   height: 100%;
// }
.header{
  padding-bottom: 20rpx;
  background: #ffffff;
  .tips{
    color: #D93F06;
    font-size: 30rpx;
    margin-left: 32rpx;
    margin-bottom: 24rpx;
    line-height: 32rpx;
    &-title{
      font-size: 34rpx;
      color:#666666;
      margin-right:20rpx;
      display: inline-block;
      vertical-align: middle;
    }
    &-img{
      width:34rpx;
      margin-right: 10rpx;
      display: inline-block;
      vertical-align: middle;
    }
    &-con{
      line-height: 24rpx;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .tips-img {
    width: 32rpx;
    height: 32rpx;
  }
}
.tool {
  // height: 96rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .picker-content{
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    width: 240rpx;
    height: 56rpx;
     border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
   color: #999999;
  }
  .normal-control-con-picker {

    // text-align: center;


    .uni-input {
      text-align: left;
      padding-left: 30rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #000000;
    }
    // .uni-input::placeholder{
    //   color: #CCCCCC;
    // }
    .img {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      .nav-list-item-arr-show {
        display: inline-block;
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .search-room-num {
    display: flex;
    align-items: center;
    width: 436rpx;
    height: 56rpx;
    background: #ffffff;
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
    image {
      display: inline-block;
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      left: 10rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    // ::-webkit-input-placeholder {
    //   /* WebKit browsers */
    //   color: #cccccc;
    //   font-size: 26rpx;
    //   // font-weight: 500;
    // }
    // input::placeholder {
    //   color: #cccccc;
    //   font-size: 26rpx;
    // }
    ::-webkit-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 4-18 */
    :-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 19-50 */
    ::-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
    :-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Edge (also supports ::-webkit-input-placeholder) */
    ::-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* CSS Working Draft */
    ::placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }
  }
  // .search {
  //   background: #fff;
  //   border: 1rpx solid #999999;
  //   // border-radius: 50%;
  //   width: 436rpx;
  //   height: 56rpx;
  //   background: #ffffff;
  //   border: 1rpx solid #999999;
  //   opacity: 1;
  //   border-radius: 60rpx;
  //   /deep/ .uni_searchbar__box {
  //     background: #fff;
  //     border: 1rpx solid #999999;
  //     // border-radius: 50%;
  //     width: 436rpx;
  //     height: 56rpx;
  //     background: #ffffff;
  //     border: 1rpx solid #999999;
  //     opacity: 1;
  //     border-radius: 60rpx;
  //   }
  // }
}
.liHeader {
  background: #f7f7f7;
  // padding: 20rpx 32rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin-bottom: 22rpx;
  padding-left: 32rpx;
  font-size: 34rpx;
}
.liContentwraper {
  display: flex;
  padding: 0 32rpx;
  justify-content: space-between;
  flex-wrap: wrap;
}
.roomContainer {
  width: 328rpx;
  height: 160rpx;
  border: 2rpx solid #e5e5e5;
  // background: #f2f2f2;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    // justify-content: space-between;
    height: 68rpx;
    font-size: 30rpx;
    // .roomNum {
    //   width: 60%;
    //   background: #fff;
    //   text-align: center;
    //   line-height: 64rpx;
    //   border-top-left-radius: 16rpx;
    // }
    .status {
      // width: 40%;

      background-color: #daffd5;
      text-align: center;
      // line-height: 64rpx;
      color: #66dd55;
      // border-top-right-radius: 16rpx;
      // border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
    .status-ruzhu {
      // width: 40%;
      background-color: #fbebe5;
      text-align: center;
      line-height: 64rpx;
      color: #d93f06;
      // border-top-right-radius: 16rpx;
      border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
  }
  .status-wrapper {
    position: relative;

    font-size: 30rpx;
    font-weight: 500;
      background: #f2f2f2;
    p{

    display: flex;
     align-items: center;
    justify-content: center;
      height: 92rpx;
         border-radius: 0rpx 0rpx 16rpx 16rpx;
    }


      .green-status{
        color: #66DD55;
        background-color: #DAFFD5;
      }
      .red-status{
        color:#F15B53;
        background-color: #FCDEDC;
      }
  }
  // .radio {
  //   position: absolute;
  //   right: 0;
  //   top: 20rpx;
  // }
}
.roomContainerCheck {
  border: 2rpx solid #2c9af1;
  .roomNum {
    color: #2c9af1;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border:1px solid #efefef;
  // padding: 58rpx 32rpx;
  // border: 1rpx solid #cccccc;
  background: #fff;
  button{
    margin: 30rpx 32rpx;
    // width: 100%;
  }
  .cancle {
    width: 328rpx;
    color: #000000;
    font-size: 34rpx;
    background: #fff;
    border: 1rpx solid #cccccc;
    border-radius: 16rpx;
    margin-right: 30rpx;
  }
  .dialogOk {
    // width: 328rpx;
    color: #fff;
    font-size: 34rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }
}
</style>
